"use client";
import { CashbackTypes } from "@/api/cashback";
import Box from "@/components/Box";
import { useLocale, useTranslations } from "next-intl";
import Image from "next/image";
import Extract from "./components/Extract";

interface Props {
    cashbackInfo: CashbackTypes;
}
const Week = (props: Props) => {
    const { cashbackInfo } = props;
    const local = useLocale();
    const t = useTranslations("cashback");
    return (
        <Box className={"rounded-[0_0_20px_20px] bg-gradient-to-b from-[#fffed5] to-[#fffffe]"}>
            <div className={"flex"}>
                <div className={"flex-1"}>
                    <h1 className={"text-[0.16rem] font-black text-[#fb8910]"}>
                        {t("weekCashback")}
                    </h1>
                    <p className={"text-[0.12rem]"}>
                        <span> {t("weekTips")} </span>
                        <span className={"text-primary-color"}>{cashbackInfo.amount ?? "???"}</span>
                        <span> {t("weekAfterTips")} </span>
                    </p>
                </div>

                <div className={"relative flex-shrink-0"}>
                    <Image
                        src="/img/cash.png"
                        height={100}
                        width={100}
                        alt="cashback"
                        className={"ml-[0.08rem] w-[1.1rem]"}
                    />
                </div>
            </div>

            <Extract cashbackInfo={cashbackInfo} local={local} />
        </Box>
    );
};
export default Week;